<template>
<div style="
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
background-color: aliceblue;
">
  <div style="
  width: 100%;
  height: 10%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;">
    <span style="margin-right: 15px;">标题</span>
    <el-input  v-model="title" style="width: 240px" placeholder="标题"/>
    <el-button-group>
      <el-button :type="isBold?'primary':'default'" 
      @click="toggleBold">加粗</el-button>

      <el-button :type="isItalic?'primary':'default'"
      @click="toggleItalic">斜体</el-button>

      <el-button :type="isQuote?'primary':'default'"
        @click="toggleQuote">引用</el-button>
      
      <el-button @click="()=>{editor.commands.setParagraph();}">正文</el-button>
      <el-button @click="()=>{editor.commands.joinDown();}">向下合并</el-button>
      
    </el-button-group>
    

    <el-button 
    style="border-top-right-radius: 0;border-bottom-right-radius: 0;" 
    @click="setColor">颜色</el-button>
    
    <el-color-picker v-model="fontColor"/>

    <el-button @click="saveDoc" :loading="saveWaiting" :disabled="commitWaiting">保存</el-button>
    <el-button @click="commitDoc" :loading="commitWaiting" :disabled="saveWaiting">发布</el-button>
    
    <el-button @click="()=>{editor.commands.setImage({ src: 'https://placehold.co/800x400' });}">图片</el-button>
  </div>
  <div 
  v-loading="saveWaiting||commitWaiting" 
  style="width: 80%;height: 88%;background-color:white;box-shadow: var(--el-box-shadow);margin: 10px;">
    <el-scrollbar style="width: 100%;height: 100%;">
      <editor-content :editor="editor"/>
    </el-scrollbar>
  </div>
</div>
</template>
<script setup>
import {useEditor,EditorContent} from '@tiptap/vue-3';
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Heading from '@tiptap/extension-heading'
import Bold from '@tiptap/extension-bold';

import Blockquote from '@tiptap/extension-blockquote'
import Italic from '@tiptap/extension-italic'

import TextStyle from '@tiptap/extension-text-style'
import Color from '@tiptap/extension-color'

import { default as TipTapImage } from '@tiptap/extension-image'
import ImageResize from 'tiptap-extension-resize-image'

import { onBeforeRouteLeave } from 'vue-router';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios'

const route=useRoute();

let articleUrl=`http://127.0.0.1:8080/articles/${route.params.id}`;

let saveWaiting=ref(false);
let commitWaiting=ref(false);
/**
 * 加粗、斜体、彩色、引用
 */
let isBold=ref(false);
let isItalic=ref(false);
let fontColor=ref('#000');
let isQuote=ref(false);

let title=ref('');


let editor = useEditor({
    content: "<p>hello world<p>",
    extensions: [
      Document,
      Paragraph,
      Text,
      Heading,
      Bold,

      Blockquote,
      Italic,

      TextStyle,
      Color,
      
      TipTapImage.configure({
        inline: true,
      }),
      ImageResize
    ],
    onSelectionUpdate({ editor }) {
      if(isBold.value!=editor.isActive('bold')){
        isBold.value=!isBold.value;
      }
      if(isItalic.value!=editor.isActive('italic')){
        isItalic.value=!isItalic.value;
      }
      if(isQuote.value!=editor.isActive('blockquote')){
        isQuote.value=!isQuote.value;
      }
    }
});

function toggleBold(){
  editor.value.commands.toggleBold();
}
function toggleItalic(){
  editor.value.commands.toggleItalic();
}
function setColor(){
  editor.value.commands.setColor(fontColor.value);
}
function toggleQuote(){
  if(!editor.value.isActive('blockquote')){
    editor.value.chain().setHeading({level:1}).setBlockquote().run();
  }else{
    editor.value.chain().setParagraph().unsetBlockquote().run();
  }
}

function saveDoc(){
  saveWaiting.value=true;
  //向服务器发送保存信息html,title
  axios.post(articleUrl,{
    operator:'save',
    title:title.value,
    content:editor.value.getHTML()
  }).then(function(response){
    console.log(response.data);
  }).catch(function(error){
    console.log(error.message);
  }).finally(function(){
    saveWaiting.value=false;
  });
}
function commitDoc(){
  commitWaiting.value=true;
  axios.post(articleUrl,{
    operator:'commit',
    title:title.value,
    content:editor.value.getHTML()
  }).then(function(response){
    console.log(response.data);
  }).catch(function(error){
    console.log(error.message);
  }).finally(function(){
    commitWaiting.value=false;
  })
}

onMounted(function(){
  axios.get(articleUrl).then(function(response){
    title.value=response.data.title;
    editor.value.commands.setContent(response.data.content);
  }).catch(function(error){
    console.log(error);
  });
});

onBeforeRouteLeave(function(to,from,next){
  const answer = window.confirm('文档未保存，是否离开');
  if (answer) {
    next()
  } else {
    next(false)
  }
});
</script>
<style>
.ProseMirror{
  outline: none;
  border: none;
  box-shadow: none;
}
.ProseMirror-focused{
  border: none;
  box-shadow: none;
}
.tiptap p{
  margin: 0;
  padding: 0;
}

blockquote {
  border-left: 3px solid grey;
  margin: 20px 0 20px 5px;
  padding-left: 5px;
}
.el-color-picker{
  height: 100%;
}
.el-color-picker>div{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 2px;
}
</style>
<style scoped>
.el-button{
  height: 100%;
  border:none;
}

</style>